<template>
  <div class="show-main">
    <el-scrollbar style="height:100%">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-form :inline="true" :model="searchForm" ref="searchForm">
            <el-form-item prop="name">
              <el-input v-model="searchForm.name" clearable placeholder="请输入模板名称"></el-input>
            </el-form-item>
            <el-form-item prop="status">
              <el-select v-model="searchForm.status" clearable placeholder="请选择状态">
                <el-option label="正常" value="1"></el-option>
                <el-option label="禁用" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click.stop="search(true)">搜索</el-button>
              <el-button type="success" @click.stop="search">刷新</el-button>
              <el-button type="warning" @click.stop="add">添加</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table :data="table" border>
          <el-table-column prop="id" label="ID"></el-table-column>
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column prop="is_system" label="分类" width="70">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.is_system == 1">系统</el-tag>
              <el-tag v-else type="success">平台</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="supplier_per" label="农村合作社%" width="100"></el-table-column>
          <el-table-column prop="center_per" label="分拣中心%" width="100"></el-table-column>
          <el-table-column prop="community_per" label="社区%" width="100"></el-table-column>
          <el-table-column prop="sup_to_cen_per" label="合作社-分拣中心运输%"></el-table-column>
          <el-table-column prop="cen_to_com_per" label="分拣中心-社区运输%"></el-table-column>
          <el-table-column label="状态" width="70">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="scope.row.status == 1 ?'正常': '禁用'" placement="top" :enterable="false">
                <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2" @change="changeStatus(scope.row)"
                  :disabled="scope.row.is_operate == 1?false:true">
                </el-switch>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="create_time" label="创建时间">
            <template slot-scope="scope">
              {{scope.row.create_time|formatDate}}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="text" :disabled="scope.row.is_operate == 1?false:true" @click="edit(scope.row.id)">编辑</el-button>
              <el-button type="text" :disabled="scope.row.is_operate == 1?false:true" @click="del(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.page"
            :page-sizes="[10,20,30,40]" :page-size="searchForm.limit" layout="total, sizes, prev, pager, next, jumper" :total="count">
          </el-pagination>
        </div>
      </el-card>
      <el-dialog title="编辑模板" :visible.sync="editVisible" :before-close="handleClose('editForm')" width="500px">
        <el-form ref="editForm" :model="editForm" label-width="180px" :rules="rules">
          <el-form-item label="名称" prop="name">
            <el-input v-model="editForm.name" clearable></el-input>
          </el-form-item>
          <el-form-item label="农村合作社%" prop="supplier_per">
            <el-input-number v-model="editForm.supplier_per" :precision="2" :step="0.1" :min="0" :max="100" label="描述文字"></el-input-number>
          </el-form-item>
          <el-form-item label="分拣中心%" prop="center_per">
            <el-input-number v-model="editForm.center_per" :precision="2" :step="0.1" :min="0" :max="100" label="描述文字"></el-input-number>
          </el-form-item>
          <el-form-item label="社区%" prop="community_per">
            <el-input-number v-model="editForm.community_per" :precision="2" :step="0.1" :min="0" :max="100" label="描述文字"></el-input-number>
          </el-form-item>
          <el-form-item label="合作社-分拣中心运输%" prop="sup_to_cen_per">
            <el-input-number v-model="editForm.sup_to_cen_per" :precision="2" :step="0.1" :min="0" :max="100" label="描述文字"></el-input-number>
          </el-form-item>
          <el-form-item label="分拣中心-社区运输%" prop="cen_to_com_per">
            <el-input-number v-model="editForm.cen_to_com_per" :precision="2" :step="0.1" :min="0" :max="100" label="描述文字"></el-input-number>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="close('editVisible', 'editForm')" size="small">取 消</el-button>
          <el-button type="primary" @click="send('editVisible','editForm')" size="small">编 辑</el-button>
        </span>
      </el-dialog>
      <el-dialog title="添加模板" :visible.sync="addVisible" :before-close="handleClose('addForm')" width="500px">
        <el-form ref="addForm" :model="addForm" label-width="180px" :rules="rules">
          <el-form-item label="名称" prop="name">
            <el-input v-model="addForm.name" clearable></el-input>
          </el-form-item>
          <el-form-item label="农村合作社%" prop="supplier_per">
            <el-input-number v-model="addForm.supplier_per" :precision="2" :step="0.1" :min="0" :max="100" label="描述文字"></el-input-number>
          </el-form-item>
          <el-form-item label="分拣中心%" prop="center_per">
            <el-input-number v-model="addForm.center_per" :precision="2" :step="0.1" :min="0" :max="100" label="描述文字"></el-input-number>
          </el-form-item>
          <el-form-item label="社区%" prop="community_per">
            <el-input-number v-model="addForm.community_per" :precision="2" :step="0.1" :min="0" :max="100" label="描述文字"></el-input-number>
          </el-form-item>
          <el-form-item label="合作社-分拣中心运输%" prop="sup_to_cen_per">
            <el-input-number v-model="addForm.sup_to_cen_per" :precision="2" :step="0.1" :min="0" :max="100" label="描述文字"></el-input-number>
          </el-form-item>
          <el-form-item label="分拣中心-社区运输%" prop="cen_to_com_per">
            <el-input-number v-model="addForm.cen_to_com_per" :precision="2" :step="0.1" :min="0" :max="100" label="描述文字"></el-input-number>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="close('addVisible', 'addForm')" size="small">取 消</el-button>
          <el-button type="primary" @click="send('addVisible','addForm')" size="small">添 加</el-button>
        </span>
      </el-dialog>
    </el-scrollbar>
  </div>
</template>
<script>
import { getTempList, getTempOnly, addTemp, changeTempStatus, editTemp, delTemp } from '@/network/api.js'

export default {
  name: 'templates',
  data() {
    return {
      searchForm: {
        page: 1,
        limit: 10,
        name: '',
        status: ''
      },
      table: [],
      count: 0,
      editForm: {
        id: 0,
        name: '', // 名称
        supplier_per: 0, // 农村合作社百分比
        center_per: 0, // 分拣中心百分比
        community_per: 0, // 社区百分比
        sup_to_cen_per: 0, // 合作社到分拣中心运输百分比
        cen_to_com_per: 0 // 分拣中心到社区运输百分比
      },
      // 添加表单
      addForm: {
        name: '', // 名称
        supplier_per: 0, // 农村合作社百分比
        center_per: 0, // 分拣中心百分比
        community_per: 0, // 社区百分比
        sup_to_cen_per: 0, // 合作社到分拣中心运输百分比
        cen_to_com_per: 0 // 分拣中心到社区运输百分比
      },
      editVisible: false, // 编辑
      addVisible: false, // 添加
      rules: {
        name: [{ required: true, message: '名称必须', trigger: 'blur' }],
        supplier_per: [{ required: true, message: '农村合作社百分比必须', trigger: 'blur' }],
        center_per: [{ required: true, message: '分拣中心百分比必须', trigger: 'blur' }],
        community_per: [{ required: true, message: '社区百分比必须', trigger: 'blur' }],
        sup_to_cen_per: [{ required: true, message: '合作社到分拣中心运输百分比必须', trigger: 'blur' }],
        cen_to_com_per: [{ required: true, message: '分拣中心到社区运输百分比必须', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.search()
  },
  computed: {},
  methods: {
    // 每页条数变化
    handleSizeChange(val) {
      this.searchForm.limit = val
      this.search()
    },
    // 当前页变化
    handleCurrentChange(val) {
      this.searchForm.page = val
      this.search()
    },
    async search(pageInit = false) {
      try {
        if (pageInit === true) {
          this.searchForm.page = 1
        }
        const rtn = await getTempList(this.searchForm)
        this.table = rtn.list
        this.count = rtn.count
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    // 添加
    add() {
      this.addVisible = true
    },
    // 修改状态
    changeStatus(ev) {
      let msg = ''
      let oldStatus = ''
      switch (ev.status) {
        case 1:
          msg = '您确定要启用该模板吗?'
          oldStatus = 2
          break
        case 2:
          msg = '此操作将禁用该模板, 是否确定?'
          oldStatus = 1
          break
        default:
          return this.$message.error('不可用的操作')
      }
      this.$confirm(msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
        // closeOnClickModal: false
      })
        .then(async () => {
          try {
            await changeTempStatus({ id: ev.id, status: ev.status })
          } catch (e) {
            ev.status = oldStatus
            this.$message.error(e.message)
          }
        })
        .catch(() => {
          ev.status = oldStatus
          this.$message.warning('您已取消操作')
        })
    },
    // 删除
    del(id) {
      this.$confirm('您确定删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      })
        .then(async () => {
          try {
            await delTemp({ id })
            this.search()
          } catch (e) {
            this.$message.error(e.message)
          }
        })
        .catch(() => {
          this.$message.warning('您已取消操作')
        })
    },
    // 编辑
    async edit(id) {
      try {
        const rtn = await getTempOnly({ id })
        this.editVisible = true
        this.$nextTick(() => {
          this.editForm = rtn
        })
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    // 关闭弹出前操作(不包括取消按钮)
    handleClose(formName) {
      return done => {
        this.$refs[formName].resetFields()
        done()
      }
    },
    // 取消按钮
    close(visibleName, formName) {
      this.$refs[formName].resetFields()
      this[visibleName] = false
    },
    send(visibleName, formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          let sum = 0
          switch (formName) {
            case 'editForm': // 编辑司机
              try {
                await editTemp(this.editForm)
                this.close(visibleName, formName)
                this.search()
              } catch (e) {
                this.$message.error(e.message)
              }
              break
            case 'addForm': // 添加模板
              sum =
                this.addForm.supplier_per +
                this.addForm.center_per +
                this.addForm.community_per +
                this.addForm.sup_to_cen_per +
                this.addForm.cen_to_com_per
              if (sum <= 0 || sum >= 100) return this.$message.error('所有百分比之和大于0小于100')
              try {
                await addTemp(this.addForm)
                this.close(visibleName, formName)
                this.search()
              } catch (e) {
                this.$message.error(e.message)
              }
              break
          }
        } else {
          this.$message.error('请检查表单')
          return false
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.el-tree-node {
  display: inline-block;
}
.el-input-number {
  width: 100%;
}
</style>
